<template>
    <!-- 添加或修改主机信息对话框 -->
    <el-drawer :title="title" :visible.sync="open" append-to-body
               custom-class="kingmon-drawer" size="40%" @closed="cancel">
        <div class="kingmon-drawer__content">
          <el-form ref="form" :model="form" :rules="rules" label-width="150px">
            <el-form-item label="IP地址" prop="ip" >
              <el-input v-model="form.ip" placeholder="请输入IP地址"
                        :disabled="isModify" clearable style="width: 250px" />
            </el-form-item>
            <el-form-item label="SSH端口" prop="sshPort" >
              <el-input-number v-model="form.sshPort" :min="1" style="width: 150px"/>
            </el-form-item>
            <el-form-item label="凭证" prop="credentialId">
              <el-select v-model="form.credentialId" clearable
                         placeholder="请选择凭证">
                <el-option v-for="cred in userCredential" :key="cred.id"
                           :label="cred.name" :value="cred.id">
                </el-option>
              </el-select>
              <el-button type="text" @click="addCredential">添加凭证</el-button>
            </el-form-item>
            <el-form-item label="主机类型" prop="serverType">
              <el-radio-group v-model="form.serverType">
                <el-radio-button :label="item.value" v-for="item in dict.type.kw_machine_type">
                  {{ item.label }}
                </el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="机房" prop="idc">
              <el-input v-model="form.idc" placeholder="请输入机房" style="width: 250px"/>
            </el-form-item>
            <el-form-item label="备注" prop="comment">
              <el-input v-model="form.comment" type="textarea" placeholder="请输入内容" style="width: 350px"/>
            </el-form-item>
            <el-collapse accordion v-if="!isModify">
              <el-collapse-item key="more" name="more">
                <template slot="title">
                  <el-button type="text">高级配置</el-button>
                </template>
                <el-form-item label="代理端口" prop="agentPort">
                  <el-input-number v-model="form.agent.port" :min="1" style="width: 150px"/>
                </el-form-item>
                <el-form-item label="代理安装目录" prop="agentHome">
                  <el-input placeholder="请输入内容" v-model="form.agent.installHome">
                    <template slot="prepend">~/</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="代理日志目录" prop="agentHome">
                  <el-input placeholder="请输入内容" v-model="form.agent.logHome">
                    <template slot="prepend">~/</template>
                  </el-input>
                </el-form-item>
              </el-collapse-item>
            </el-collapse>
          </el-form>
        </div>
        <div class="kingmon-drawer__footer">
          <el-button type="primary" @click="submitForm" :loading="loading">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      <add-credential v-if="openCredential" disable-access-type @closeDrawer="getUserCredential"/>
    </el-drawer>
</template>

<script>
import { getMachine, addMachine, updateMachine } from "@/api/machine/machine";
import { listCredential} from "@/api/credential/credential";
import { validateIp } from "@/utils/validate";
import AddCredential from "@/views/system/user/credential/addCredential";
export default {
  name: "AddMachine",
  dicts: ['kw_machine_type'],
  components:{AddCredential},
  props:["id"],
  data() {
    return {
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      openCredential:false,
      loading:false,
      // 表单参数
      form: {serverType:1,sshPort:22,
        agent:{
          port:8088, installHome:"jwagent",logHome:"jwagent/log",version:"1.0.0"
        }
      },
      userCredential:[],
      // 表单校验
      rules: {
        ip: [
          { required: true, trigger: "blur",validator:validateIp }
        ],
        sshPort: [
          { required: true, message: "SSH端口不能为空", trigger: "blur" }
        ],
        credentialId: [
          { required: true, message: "请选择凭证", trigger: "blur" }
        ],
        idc: [
          { required: true, message: "机房不能为空", trigger: "blur" }
        ],
      }
    };
  },
  created() {
    this.getUserCredential()
    if(this.id){
      this.title = "修改主机";
      this.handleUpdate()
    }else{
      this.title = "添加主机";
    }
    this.open = true;
  },
  computed:{
    isModify(){
      return this.id && this.id!=null && this.id!="";
    },
  },
  methods: {
    getUserCredential(credentialId){
      this.openCredential=false;
      listCredential({accessTarget:"host"}).then(response => {
        this.userCredential = response.rows;
        if(credentialId){
          this.form.credentialId = credentialId;
        }
      });
    },
    addCredential() {
      this.openCredential = true;
    },
    // 取消按钮
    cancel() {
      this.$emit("closeDrawer")
      this.open = false;
      this.loading = false;
    },
    /** 修改按钮操作 */
    handleUpdate() {
      const id = this.id;
      getMachine(id).then(response => {
        this.form = response.data;
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.loading = true;
          if (this.form.id != null) {
            updateMachine(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.cancel()
            }).catch(msg =>{
              this.loading = false;
            });
          } else {
            addMachine(this.form).then(response => {
              this.$modal.msgSuccess("新增主机任务创建成功");
              this.cancel()
            }).catch(msg =>{
              this.loading = false;
            });
          }
        }
      });
    },
  }
};
</script>
